<template>
  <div class="header">
    <el-row align="middle" justify="start">
      <!-- left -->
      <el-col :span="2" :offest="0">
        <header-left></header-left>
      </el-col>
      <!-- middle -->
      <el-col :span="17" class="header-body">
        <header-middle></header-middle>
      </el-col>
      <!-- right -->
      <el-col :span="5" class="header-right flex aligncenter justright font14 gap30">
        <!-- 主题切换开关 -->
        <el-switch
          style="--el-switch-on-color: #303133; --el-switch-off-color: #dcdfe6"
          v-model="state.switchValue"
        >
          <template #active-action>
            <svg-icon iconName="icon-moon1" />
          </template>
          <template #inactive-action>
            <svg-icon iconName="icon-wbsunny" />
          </template>
        </el-switch>
        <div class="header-right-tabs flex gap30">
          <div
            class="header-right-tabs-item"
            v-for="(item, index) in state.rightItems"
            :key="'rightItems_' + index"
          >
            <span
              class="item flex gap3 pointer"
              :class="state.activeIndex === index ?? 'active'"
              @click="checkActiveIndexFn"
              >{{ item.label
              }}<svg-icon
                :iconName="item?.icon"
                :customStyle="state.linkIconStyle"
            /></span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { Picture as IconPicture, Search } from '@element-plus/icons-vue'
import defaultData from '@/data/index'
import HeaderLeft from '@/components/header/left.vue'
import HeaderMiddle from '@/components/header/middle.vue'
import { reactive, computed } from 'vue'

const state = reactive({
  switchValue: false, //主题开关
  searchOption: 'all', // 搜索选项默认
  searchOptionList: computed(() => {
    return defaultData.headerSearchOptionList
  }), // 搜索选项list
  currentTabIndex: 'home', // 当前tab选项
  itemMeau: computed(() => {
    return defaultData.headerMiddleTabsData
  }), // tabs列表
  activeIndex: 0, //右侧选择项索引
  rightItems: computed(() => {
    return defaultData.headerRightTabsData
  }), //右侧选择项list
  autocompleteSel: '', // 搜索框内容,
  linkIconStyle: {
    width: '14px',
    height: '14px',
    fill: 'blue',
  }, //个人链接的icon样式
})

// 搜索提交Fn
const submitSearch = () => {
  console.log('submitSearch')
}

// 搜索Fn
const searchFn = (content: string, callback: any) => {
  console.log('searchFn', content)
  console.log('callback', callback)
  callback([])
}

// tabs点击事件
const handleClick = (tab: any) => {
  console.log('handleClick', tab)
}

// 切换当前索引Fn
const checkActiveIndexFn = () => {}

</script>

<style lang="scss" scoped>
.header {
  position: sticky;
  top: 0;
  margin: 0 auto;
  padding: 0 8rem 1px;
  background: rgba($color: #ffffff, $alpha: 0.4);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

  &-body {
    padding: 10px 20px 0px;

    &-tabs {
      max-width: 40%;
      flex: 1;
    }

    &-search {
      padding: 10px 0px;
    }

    &-select {
      width: 4.5rem;
      //   background-color: #fff;

      //   :deep(.el-select__wrapper) {
      //     // border-radius: 50px 0px 0px 50px;
      //     // min-height: 36px;
      //   }
    }

    // :deep(.el-input-group__append) {
    //   border-radius: 0px 50px 50px 0px;
    // }
  }
  &-right{
    &-tabs{
      &-item{
        .item:hover{
          color: $white;
        }
      }
    }
  }
  :deep(.el-tabs__header) {
    margin-bottom: 0px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    position: static;
  }
  :deep(.el-tabs__item) {
    font-size: 16px;
  }
  :deep(.el-tabs__item.is-active) {
    color: $white;
  }
  :deep(.el-tabs__active-bar) {
    background-color: $white;
  }
  :deep(.el-tabs__item:hover) {
    color: $white;
  }
  :deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
      inset;
  }
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
      inset;
  }
}
</style>
